<template>
  <div>
    <el-card>
      <el-button type="primary"
        @click="add()">添加图片</el-button>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column label="缩略图"
          width="150">
          <template slot-scope="{ row }">
            <img :src="row.picurl"
              style="width:100%;">
          </template>
        </el-table-column>

        <el-table-column label="排序权重"
          align="center"
          width="100">
          <template slot-scope="{ row }">
            {{row.sort}}
          </template>
        </el-table-column>

        <el-table-column label="操作"
          align="center"
          min-width="400">
          <template slot-scope="{row}">
            <el-button size="mini"
              type="primary"
              @click="open(row)">编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini"
              @click="removeTodo(row.id)"
              type="danger">删除
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>

    <CustomerDetails v-if="formShow"
      ref="CustomerDetails"
      @close="formShow=false"
      :item="sltItem"  />
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'
import CustomerDetails from './components/CustomerDetails'

export default {
  components: {
    BasePagination,
    CustomerDetails
  },

  data() {
    return {
      formShow: false,
      sltItem: {},
      tableData: [
        {
          laber:'缩略图',
          prop:'picurl'
        },
        {
          laber:'排序权重',
          prop:'sort'
        },
      ],
      maxPage: 1,
      nowPage: 1
    }
  },

  watch: {
    nowPage() {
      this.getData()
    }
  },

  created(){
    this.getData();
  },
  methods: {
    init(to, from) {
      this.getData()
    },
    search(keyname) {
      return this.tableData.filter(item => {
        if (item.name.includes(keyname)) {
          return item
        }
      })
    },
    getData() {
      // this.tableData = []
      // this.tableDataOther.filter((item, index) => {
      //   if (item.name.includes(this.keyname)) {
      //     this.$nextTick(() => {
      //       this.tableData.push(item)
      //     })
      //   } else {
      //   }
      // })
      this.$http.get('/Manage/advert/lists')
        .then(res=>{
          if(res.code===1){
            this.tableData = res.data.list;
          }else{

          }
        })
    },

    filterChange() {
      if (this.keyname) {
        this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
      } else {
        this.tableData = [...this.tableDataOther]
      }
    },
    add() {
      this.sltItem = {
        img: ''
      }
      this.formShow = true
    },
    open(row) {
      this.sltItem = row
      this.formShow = true
    },

    removeTodo(id) {
      this.$confirm("确认删除?", "删除", {
        type: "error"
      })
        .then(() => {
          this.$http
            .post("/Manage/advert/del", {
              id:id
            })
            .then(res => {
              this.getData();
            });
        })
        .catch(() => {});
    },
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
